// 导入flex.scss样式
@import "../flex.css";
html, body { padding: 0; margin: 0; height: 100%; }
.w_1240 { max-width: 1240px; margin: 0 auto;}
.line1 {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
@mixin inputcolor($color1:#63758a,$color2:#b7c0cc) {
    & input, & textarea { color: $color1;}
    & input::-webkit-input-placeholder { color: $color2;}
    & input:-moz-placeholder { color: $color2;}
    & input::-moz-placeholder { color: $color2;}
    & input:-ms-input-placeholder { color: $color2;}
    & textarea::-webkit-input-placeholder { color: $color2;}
}
@mixin Easing($num) {transition: all $num+s ease-in-out;}
.container { box-sizing: border-box; padding: 140px 0 70px 0; background: url("../../../images/bg_01.png") no-repeat center center; background-size: cover; min-height: 100%;}
.quick_access_list1 { display: flex; list-style-type: none; padding: 0; margin: 0;
    li { flex: 1; margin-right: 20px; border-radius: 6px; overflow: hidden;
        &:last-child { margin-right: 0;}
        div { padding: 20px; height: 100px; box-sizing: border-box;
            h3 { margin: 0; font-weight: 500; font-size: 20px; color: #FFFFFF; line-height: 0.8em;}
        }
        &.quick_access_list1_01 {
            background: linear-gradient(312deg, #AEC5FF 0%, #799EFF 100%);
            div {
                background: url("../../../images/xx_01.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list1_02 {
            background: linear-gradient(312deg, #C3EFD9 0%, #68DAAC 100%);
            div {
                background: url("../../../images/xx_02.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list1_03 {
            background: linear-gradient(314deg, #CCC7FB 0%, #A19CFE 100%);
            div {
                background: url("../../../images/xx_03.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list1_04 {
            background: linear-gradient(311deg, #F9E0AF 0%, #FFAD58 100%);
            div {
                background: url("../../../images/xx_04.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list1_05 {
            background: linear-gradient(312deg, #AEC5FF 0%, #799EFF 100%);
            div {
                background: url("../../../images/xx_05.png") no-repeat right top; background-size: auto 100%;;
            }
        }
    }
}
.quick_access_list2 { display: flex; list-style-type: none; padding: 0; margin: 26px 0 20px 0;
    li { flex: 1; margin-right: 20px; border-radius: 6px; overflow: hidden;
        &:last-child { margin-right: 0;}
        div { padding: 16px 20px; height: 100px; box-sizing: border-box;
            header { height: 30px; line-height: 30px; font-weight: 500; font-size: 28px; color: rgba(0, 0, 0, 0.85);
                span { font-weight: 400; font-size: 14px; color: rgba(0, 0, 0, 0.85); padding-left: 5px;}
            }
            h3 { font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.85); margin: 14px 0 0 0; line-height: 24px;}
        }
        &.quick_access_list2_01 {
            background: #E4ECFF;
            div {
                background: url("../../../images/xx_06.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list2_02 {
            background: #F3E8FF;
            div {
                background: url("../../../images/xx_07.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list2_03 {
            background: #E4ECFF;
            div {
                background: url("../../../images/xx_08.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list2_04 {
            background: #F3E8FF;
            div {
                background: url("../../../images/xx_09.png") no-repeat right top; background-size: auto 100%;;
            }
        }
        &.quick_access_list2_05 {
            background: #FEF2F1;
            div {
                background: url("../../../images/xx_10.png") no-repeat right top; background-size: auto 100%;;
            }
        }
    }
}
.card_container { background: #DDE7F8; border-radius: 6px; backdrop-filter: blur(5px); margin-bottom: 20px;
    > header { height: 60px; background: rgba(255, 255, 255, 0.65); border-radius: 6px; backdrop-filter: blur(6px); overflow: hidden;
        padding: 0 20px;
        h3 { padding: 0; margin: 0; height: 60px; line-height: 60px;}
    }
    > main { padding: 20px;}
    .card_list { display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0;
        > li { width: 23.36%; margin: 2.18% 2.18% 0 0; border-radius: 6px; overflow: hidden; padding: 7px 12px 0 7px; box-sizing: border-box; height: 148px;
            background: url("../../../images/xx_11.png") no-repeat center; background-size: 100% 100%;
            box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.06); backdrop-filter: blur(5px);
            &:nth-child(4n) { margin-right: 0;}
            &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) { margin-top: 0;}
            > header { display: flex; height: 24px; align-items: center;
                h4 { margin: 0; font-weight: 500; font-size: 16px; color: rgba(0, 0, 0, 0.85); min-width: 0;}
                div { flex: 1;
                    span { margin-left: 8px; height: 20px; line-height: 20px; background: #FFFFFF; border-radius: 4px; border: 1px solid #52C41A;
                        font-size: 12px; color: #52C41A; padding: 0 4px;
                    }
                }
                strong { font-size: 16px; color: #FFFFFF; font-weight: normal;}
            }
            > ul { display: flex; justify-content: space-between; list-style-type: none; padding: 14px 0 12px 0; margin: 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                li {
                    div { line-height: 24px; font-weight: 400; font-size: 14px; color: rgba(0, 0, 0, 0.85);}
                    span { display: block; line-height: 30px; font-size: 20px;}
                }
            }
            > footer { margin-top: 6px; font-size: 14px; color: rgba(0, 0, 0, 0.85); line-height: 24px;}
        }
    }
}
.card_echarts_container { display: flex; padding: 20px;
    background: rgba(255, 255, 255, 0.65); border-radius: 6px; backdrop-filter: blur(9px);
    > div { width: 50%; box-sizing: border-box; height: 290px;
        &:first-child { border-right: 1px solid rgba(84,107,236,0.2); padding-right: 40px;}
        &:last-child { padding-left: 40px;}
        > header {
            h3 { margin: 0; font-weight: 500; font-size: 20px; color: rgba(0, 0, 0, 0.85); line-height: 28px;}
        }
        > main { width: 100%; height: 250px; margin-top: 12px;}
    }
}
